<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />

	</head>
	<body>
		<div class="addBrand-container" id="member-add-app">
			<div class="container">
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :inline="false" label-width="180px"
					class="demo-ruleForm">
					<el-form-item label="账号:" prop="username">
						<el-input v-model="ruleForm.username" placeholder="请输入账号" maxlength="20" />
					</el-form-item>
					<el-form-item label="密码:" prop="password">
						<el-button @click="updatePassPage">密码修改</el-button>
					</el-form-item>
					<el-form-item label="管理员昵称:" prop="nickname">
						<el-input v-model="ruleForm.nickname" placeholder="请输入管理员昵称" maxlength="20" />
					</el-form-item>
					<el-form-item label="管理员真实姓名:" prop="name">
						<el-input v-model="ruleForm.name" placeholder="请输入管理员真实姓名" maxlength="20" />
					</el-form-item>
					<el-form-item label="管理员年龄:" prop="age">
						<el-input v-model="ruleForm.age" placeholder="请输入管理员年龄" maxlength="20" />
					</el-form-item>
					<el-form-item label="管理员生日:" prop="birthday">
						<el-date-picker v-model="ruleForm.birthday" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="类型">
						<el-select v-model="ruleForm.type" prop="status">
							<el-option label="超级管理员" value="超级管理员"></el-option>
							<el-option label="管理员" value="管理员"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号:" prop="phone">
						<el-input v-model="ruleForm.phone" placeholder="请输入手机号" maxlength="20" />
					</el-form-item>
					<el-form-item label="邮箱:" prop="email">
						<el-input v-model="ruleForm.email" placeholder="请输入邮箱" maxlength="20" />
					</el-form-item>
					<el-form-item label="身份证号:" prop="idNumber">
						<el-input v-model="ruleForm.idNumber" placeholder="请输入身份证号" maxlength="20" />
					</el-form-item>
					<el-form-item label="头像:" prop="region" class="uploadImg">
						<el-upload class="avatar-uploader" action="/apis/common/upload" :show-file-list="false"
							:on-success="handleAvatarSuccess">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<div class="subBox address">
						<el-form-item>
							<el-button @click="goBack()">取消</el-button>
							<el-button type="primary" @click="submitForm('ruleForm', false)">保存</el-button>
							<el-button v-if="actionType == 'add'" type="primary" class="continue"
								@click="submitForm('ruleForm', true)">
								保存并继续添加
							</el-button>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<!--修改弹框-->
			<el-dialog title="密码修改" :visible.sync="dialogPassUpdateVisible">
				<el-form :model="formpass" ref="formpass" :rules="passFormRules" class="demo-ruleForm"
					:inline="false">
					<el-form-item label="原始密码" prop="oldpass">
						<el-input v-model="formpass.oldpass" type="password" placeholder="请输入原始密码" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="新 密 码" prop="newpass">
						<el-input v-model="formpass.newpass" type="password" placeholder="请输入新密码" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="newpass2">
						<el-input v-model="formpass.newpass2" type="password" placeholder="请确认输入密码" maxlength="20"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogPassUpdateVisible = false">取 消</el-button>
					<el-button type="primary" @click="updatePass('formpass')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../../plugins/element-ui/index.js"></script>
		<!-- 引入axios -->
		<script src="../../plugins/axios/axios.min.js"></script>
		<script src="../../js/request.js"></script>
		<script src="../../api/admin.js"></script>
		<script src="../../js/validate.js"></script>
		<script src="../../js/index.js"></script>
		<script>
			new Vue({
				el: '#member-add-app',
				data() {
					validatePass2 = (rule, value, callback) => {
						if (!value) {
							callback(new Error("请再次输入密码"));
						} else if (value !== this.formpass.newpass) {
							callback(new Error("两次输入的密码不一致"));
						} else {
							callback();
						}
					};
					return {
						id: '',
						imageUrl: '',
						actionType: '',
						dialogPassUpdateVisible: false,
						formpass: {
							adminId: '',
							oldpass: "",
							newpass: "",
							newpass2: "",
						},
						ruleForm: {
							adminId: '',
							userName: '',
							password: '',
							name: '',
							nickname: '',
							age: '',
							birthday: '',
							type: '',
							email: '',
							phone: '',
							image: '',
							idNumber: '',
						}
					}
				},
				computed: {
					rules() {
						return {
							//账号
							'username': [{
								required: true,
								'validator': checkUserName,
								trigger: 'blur'
							}],
							//姓名
							'name': [{
								required: true,
								'validator': checkName,
								'trigger': 'blur'
							}],
							'phone': [{
								'required': true,
								'validator': checkPhone,
								'trigger': 'blur'
							}],
							'idNumber': [{
								'required': true,
								'validator': validID,
								'trigger': 'blur'
							}]
						}
					},
					passFormRules() {
						return {
							//密码
							'oldpass': [{
								required: true,
								'validator': validatePass,
								trigger: 'blur'
							}],
							//密码
							'newpass': [{
								required: true,
								'validator': validatePass,
								'trigger': 'blur'
							}],
							//密码
							'newpass2': [{
								'required': true,
								'validator': validatePass2,
								'trigger': 'blur'
							}]
						}
					}
				},
				created() {
					/*获取参数id*/
					this.id = requestUrlParam('id'); //从网址上解析参数
					/*判断参数是id还是add  -》如果是id调用edit   否则调用add*/
					this.actionType = this.id ? 'edit' : 'add';
					if (this.id) {
						this.init()
					}
				},
				mounted() {},
				methods: {
					handleAvatarSuccess(res, file) {
						console.log(res.data);
						this.ruleForm.image = res.data
						console.log(this.ruleForm.image);
						console.log(file);
						this.imageUrl = URL.createObjectURL(file.raw);
					},
					async init() {
						//发起一个异步请求，获取用户信息
						queryAdminById(this.id).then(res => {
							// console.log(res);
							if (String(res.code) === '1') {
								// console.log(res.data);
								this.ruleForm = res.data;
								this.imageUrl = $minioUrl + res.data.image
								// this.ruleForm.password = ''
							} else {
								this.$message.error(res.msg || '操作失败')
							}
						})
					},
					submitForm(formName, st) {
						var _this = this
						this.$refs[formName].validate((valid) => {
							if (valid) {
								if (this.actionType === 'add') {
									//params = 数据
									const params = {
										...this.ruleForm,
										sex: this.ruleForm.sex === '女' ? '0' : '1'
									};
									/*找到发送请求的方法*/
									addAdmin(params).then(res => {
										if (res.code === 1) {
											this.$message.success('员工添加成功！');
											if (!st) {
												this.goBack()
											} else {
												this.ruleForm = {
													'adminId': '',
													'userName': '',
													'password': '',
													'name': '',
													'nickname': '',
													'age': '',
													'birthday': '',
													'type': '',
													'email': '',
													'phone': '',
													'image': '',
													'idNumber': '',
												}
											}
										} else {
											this.$message.error(res.msg || '操作失败')
										}
									}).catch(err => {
										this.$message.error('请求出错了：' + err)
									})
								} else {
									const params = {
										...this.ruleForm
									};
									editAdmin(params).then(res => {
										if (res.code === 1) {
											this.$message.success('员工信息修改成功！');
											setTimeout(function() {
												_this.goBack()
											}, 1000);
										} else {
											this.$message.error(res.msg || '操作失败')
										}
									}).catch(err => {
										this.$message.error('请求出错了：' + err)
									})
								}
							} else {
								console.log('error submit!!');
								return false
							}
						})
					},
					updatePassPage() {
						this.dialogPassUpdateVisible = true
					},
					updatePass(passForm) {
						// 密码校验和ID赋值
						var _this = this
						this.$refs[passForm].validate(valid => {
							if (valid) {
								// ID赋值
								this.formpass.adminId = this.ruleForm.adminId
								//请求后端修改密码
								editAdminPass(this.formpass).then(res => {
									if (res.code == "1") {
										this.$message.success('员工密码修改成功！');
										this.dialogPassUpdateVisible = false
										this.formpass = {}
									} else {
										this.$message.error(res.msg ? res.msg : "修改出错了");
									}
								})
							} else {
								console.log('error submit!!');
								return false
							}
						})
					},
					goBack() {
						window.parent.menuHandle({
							id: '11',
							url: 'page/admin/list.html',
							name: '管理员管理'
						}, false)
					}
				}
			})
		</script>
	</body>
</html>